<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多层表头</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style type="text/css">
.l-panel{
  border:none;
  color:#000;
}
.l-grid-row-cell-last{
  border-right: none;
}
.l-grid-hd-cell-last{
  border-right: none;
}
.l-grid-row-cell{
  border-color: #000;
}
.l-grid-hd-cell{
  border-color: #000;
}
.l-grid-header{
  border-color: #000;
}
.l-panel table, .l-panel td{
    line-height: 24px;
  }
  .l-grid-row-cell-inner-title{
    line-height: 24px;
    height: 24px;
  }

  .title_content{
    float: left;
    width: 400px;
  }
  .title1{
    line-height: 140%;
    font-size: 24px;
    text-decoration: underline;
  }
  .title2{
    line-height: 140%;
    font-size: 16px;
    text-decoration: underline;
  }
  .subtitle_content{
    float: right;
    width: 200px;
     text-decoration: underline;
     line-height: 180%;
    font-size: 16px;
    text-align: center;
    padding-top:20px;
  }
   .l-grid-editor{
    padding:0px;
   }
  .l-grid-editor .textinput{
    height: 22px;
    line-height: 22px;
    border-color:transparent;
  }
   .l-grid-editor .textinput_click{
    height: 22px;
    line-height: 22px;
    border-color:transparent;
  }
  .l-grid-row-cell-editing{
    padding-left: 0!important;
  }
</style>
</head>
<body>
  <div class="page_content">
<div class="groupTitle"><span>示例说明：点击中间三列内容可编辑，只允许输入数字。</span></div>


<div class="title_content">    
  <div class="title1">  
  XX集团电子财务报表系统<br/>
  XXX钢铁股份有限公司<br/>
  资产负债表<br/>
  </div>
  <div class="title2"> 
  2017年6月<br/>
  人民币(元)
  </div>
</div>
<div class="subtitle_content">
资产负债表<br/>
每月
</div>
<div class="clear"></div>

	<div id="maingrid"></div>
  </div>
<script type="text/javascript">
		 var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
      {"col1":"流动资产","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
      {"col1":"货币资金","col2":"资1","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"交易性金融资产","col2":"资3","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"应收票据","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"应收账款","col2":"资2","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"减:坏账准备","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"应收账款净额","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"预付款项","col2":"资14","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"应收利息","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"应收股利","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"其他应收款","col2":"资18","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"存货","col2":"资4","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"一年内到期的非流动资产","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"其他流动资产","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
       {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
      {"col1":"流动资产合计","col2":"资1","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},

       {"col1":"非流动资产","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
      {"col1":"可供出售的金融资产","col2":"资1","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"持有至到期投资","col2":"资3","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"长期应收款","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"长期股权投资","col2":"资2","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"投资性房地产","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"固定资产原价","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"减：累计折旧","col2":"资14","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"固定资产净值","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"减：固定资产减值准","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"固定资产净额","col2":"资18","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"在建工程","col2":"资4","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"工程物资","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"固定资产清理","col2":"","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
       {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
      {"col1":"非流动资产合计","col2":"资1","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
      {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
      {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""},
       {"col1":"资产总计","col2":"资1","col3":"142620487","col4":"287106216","col5":"278100632","col6":"135,480,145","col7":"94.99%","col8":""},
       {"col1":"","col2":"","col3":"","col4":"","col5":"","col6":"","col7":"","col8":""}

      ]}
       

       //数据表格
    var g;
        
    function initComplete(){
    	 g = $("#maingrid").quiGrid({
                columns: [ 
                  { display: '会计科目', name: 'col1',width: 200, frozen: true,resizable:false,align:"right"},
                  { display: '附注', name: 'col2',width: 60, frozen: true,resizable:false,render: function(rowdata, rowindex, value, column){
                       return  "<span style='font-weight:bold;'>" + value + "</span>"
                      }},
                  { display: '年初数', name: 'col3',width: 150,resizable:false,editor: { type: 'text',inputMode:"numberOnly"}},
                  { display: '上月底数', name: 'col4',width: 150,resizable:false,editor: { type: 'text',inputMode:"numberOnly"}},
                  { display: '本月底数', name: 'col5',width: 150,resizable:false,editor: { type: 'text',inputMode:"numberOnly"}},
                  { display: '差异数', name: 'col6',width: 150,resizable:false},
                  { display: '差异比', name: 'col7',width: 150,resizable:false},
                  { display: '理由', name: 'col8',width: 200,resizable:false}
                ], 
                data:testData, 
                pageSize: 10, sortName: 'name',alternatingRow:false,noSelecton:true,enabledSort:false,enabledEdit: true,
                height:'100%', width:'100%',multihead:true,usePager:false,rownumbers:false,checkbox:false,rowHeight:24,headerRowHeight:28,
                rowAttrRender: function(rowdata, rowid){
                return ("流动资产合计" == rowdata.col1||"流动资产" == rowdata.col1||"非流动资产" == rowdata.col1||"非流动资产合计" == rowdata.col1||"资产总计" == rowdata.col1) ? "style=\"font-weight:bold;\"" : '';
                }
            });
    }
    function pertonum(stringObj){
      var newstr=stringObj.replace(/%/, "");
      return Number(newstr);
    }

    //渲染能力条
  function renderAbilityBar(rowdata, rowindex, value, column){
     return "<div class='abilitybar'><div class='bar' style='width:" + value * 30 + "px;'></div></div>";
  }
  function renderText(rowdata, rowindex, value, column){
    var content;
    if(pertonum(value)>100){
      content="<span style='color:#2da9fa;'>" + value + "</span>"
    }
    else if(pertonum(value)<0){
      content="<span class='red'>" + value + "</span>"
    }
    else{
      content=value;
    }
    return content;
  }
          
    </script>		
</body>
</html>